<template>
	<view class="container">
		<view class="header">
			<view class="header-left">
			</view>
			<view class="header-right" @click="handleZhuce">
				注册
			</view>
		</view>

		<view class="form">
			<view class="form-title">
				登录
			</view>
			<view class="form-input" style="margin-bottom: 42rpx;">
				<input placeholder="请输入账号" v-model="form.mobile" />
			</view>
			<view class="form-input">
				<input placeholder="请输入密码" :password="showPassword" v-model="form.password" />
				<image v-if="showPassword" src="@/static/hide.png" mode="aspectFill" @click="changePassword"></image>
				<image v-else src="@/static/open.png" mode="aspectFill" @click="changePassword"></image>
			</view>
			<view class="form-wj">
				忘记密码
			</view>
			<view class="form-btn" @click="handleLogin">
				登录
			</view>

		</view>
		<view style="padding: 20rpx;">
			<xieyi v-model:isCheck="isCheck">
				<text>{{ initInfo.shop_name }}APP</text>
				<text style="color: #1A64FF;">《隐私政策》</text>
				<text style="color:#1A64FF;">《用户服务协议》</text>
			</xieyi>
		</view>
		<view class="footer" v-if="initInfo.login_is_wx == '1'">
			<view class="footer-title">其他登录方式</view>
			<view class="footer-icon" @click="handleWechatLogin">
				<image src="@/static/weixin.png" mode="aspectFill"></image>
			</view>
			<view class="footer-tip">
				微信授权登录
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getHttpApi,
		postHttpApi
	} from '@/api/api.js';
	import login from '@/utils/login.js';
	import utils from "@/utils/utils.js";
	import xieyi from "@/components/xieyi/index.vue";

	const showPassword = ref(true);
	const initInfo = ref({});
	const isCheck = ref(false);
	const form = ref({
		mobile: '',
		password: ''
	});

	const handleWechatLogin = () => {
		login.authLogin(() => {});
	};

	const handleLogin = () => {
		if (!isCheck.value) {
			uni.showToast({
				title: '请先同意隐私协议',
				icon: 'none'
			});
			return;
		}
		if (!form.value.mobile) {
			uni.showToast({
				title: '请先输入账号',
				icon: 'none'
			});
			return;
		}
		if (!form.value.password) {
			uni.showToast({
				title: '请先输入密码',
				icon: 'none'
			});
			return;
		}
		postHttpApi({
			mobile: form.value.mobile,
			password: form.value.password
		}, '&route=member.login.index&type=5&scope=pass&uuid=0&shop_id=null').then(res => {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		});
	};

	const changePassword = () => {
		showPassword.value = !showPassword.value;
	};

	const goHome = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		});
	};

	const handleZhuce = () => {
		uni.navigateTo({
			url: '/pages/login/zhuce'
		});
	};

	const getInit = () => {
		getHttpApi({
			route: 'member.login.new-login-mode',
			type: '1',
			scope: 'pass',
			validate_page: '1'
		}).then(res => {
			initInfo.value = res.data;
		});
	};

	const handleCheck = () => {
		isCheck.value = !isCheck.value;
	};

	onMounted(() => {
		let _code = utils.getUrlParam("code");
		if (_code == null || _code === "") {
			// Do nothing
		} else {
			login.authLogin(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			});
		}
		getInit();
	});
</script>

<style>
	page {
		background-image: url('../../static/bg.png');
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 18rpx 28rpx 18rpx 10rpx;

		&-left {
			width: 44rpx;
			height: 44rpx;
		}

		&-right {
			font-weight: 350;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}

	.form {
		width: 640rpx;
		margin: auto;
		margin-top: 84rpx;

		&-title {
			font-weight: 400;
			font-size: 72rpx;
			color: #000000;
			margin-bottom: 154rpx;
		}

		&-input {
			width: 640rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #000000;
			position: relative;

			&>image {
				width: 56rpx;
				height: 56rpx;
				position: absolute;
				right: 24rpx;
				top: 28rpx;
			}

			&>input {
				height: 100%;
				padding: 0 46rpx;
			}
		}

		&-wj {
			font-weight: 350;
			font-size: 26rpx;
			color: #1A64FF;
			line-height: 48rpx;
			padding: 20rpx 0 22rpx;
			text-align: right;
		}

		&-btn {
			width: 638rpx;
			height: 104rpx;
			background: #1A64FF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-weight: 900;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 104rpx;
		}

	}

	label {
		font-weight: 350;
		font-size: 24rpx;
		color: #2C2E3B;
		line-height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 42rpx;
	}

	.footer {
		margin-top: 144rpx;
		width: 100%;
		text-align: center;

		&-title {
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
			line-height: 48rpx;
		}

		&-icon {
			width: 118rpx;
			height: 118rpx;
			margin: 74rpx auto 28rpx;

		}

		&-tip {
			font-weight: 350;
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 48rpx;
		}
	}
</style>